<template>
	<div class="columns">
		<div class="column is-full">
			<el-card class="box-card" shadow="never">
				<!-- Card Header -->
				<div slot="header" class="clearfix">
					<span><i class="fa fa-bandcamp"> 帖子 / 发布帖子 </i></span>
				</div>
				<!-- Card Body -->
				<div>
					<el-form ref="createFormModel" class="demo-createFormModel" :model="createFormModel" :rules="rules">
						<!-- Title -->
						<el-form-item prop="title">
							<el-input v-model.lazy="createFormModel.title" placeholder="输入主题名称" />
						</el-form-item>

						<!-- Markdown -->
						<div id="vditor" />

						<!-- Tags -->
						<b-taginput
							class="my-3"
							type="is-success"
							rounded
							v-model="createFormModel.tags"
							maxlength="15"
							maxtags="3"
							ellipsis
							placeholder="请输入主题标签，限制为 15 个字符和 3 个标签"
						/>
						<el-form-item>
							<el-button type="primary" @click="submitForm('createFormModel')">立即创建</el-button>
							<el-button @click="resetForm('createFormModel')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import { post } from '@/api/post'
import Vditor from 'vditor'
import 'vditor/dist/index.css'

export default {
  	name: 'TopicPost',

	data() {
		return {
			// Vditor content
			contentEditor: {},

			createFormModel: {
				title: '',   // 标题
				tags: [],    // 标签
				content: '', // 内容
			},

			rules: {
				title: [
					{ required: true, message: '请输入话题名称', trigger: 'blur' },
					{ min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' },
				]
			}
		}
 	},

  	// 页面加载完成后，挂载 Vditor 编辑器
	mounted() {
		// 声明一个 Vditor 对象
		this.contentEditor = new Vditor('vditor', {
			// 编辑器总高度
			height: 500,

			// 输入区域为空时的提示
			placeholder: '此处为话题内容',

			// 编辑器主题: classic, dark
			theme: 'classic',

			// 字数统计
			counter: {
				enable: true,
				// 统计类型: 'markdown', 'text'
				type: 'markdown',
			},

			// 编辑器预览配置
			preview: {
				delay: 0,
				// 代码块主题
				hljs: {
					style: 'monokai',
					lineNumber: true,
				},
			},

			// tab 键操作字符串，支持 \t 及任意字符串
			tab: '\t',

			// 是否启用打字机模式
			typewriterMode: true,

			// 编辑器工具栏配置
			toolbarConfig: {
				// 是否固定工具栏
				pin: true,
			},

			// 是否缓存编辑的内容
			cache: {
				// 是否使用 localStorage 进行缓存
				enable: false,
			},

			// 可选模式: sv (分屏预览), ir (及时渲染), wysiwyg (所见即所得)
			mode: 'sv',
		})
	},

	methods: {
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (!valid) return false

				// 检测 Vditor 内容是否为空
				if (this.contentEditor.getValue().length === 1 ||
					this.contentEditor.getValue() == null ||
					this.contentEditor.getValue() === '') {
					this.$buefy.toast.open({
						duration: 3000,
						message: '<b>帖子内容不能为空</b>',
						positiom: 'is-top',
						type: 'is-warning'
					})
					return false;
				}

				// 检测标签
				if (this.createFormModel.tags == null || this.createFormModel.tags.length === 0) {
					this.$buefy.toast.open({
						duration: 3000,
						message: '<b>标签内容不能为空</b>',
						positiom: 'is-top',
						type: 'is-warning'
					})
					return false
				}

				// 为将要提交给后端的 createFormModel 赋值，值为 Vditor 输入域的内容
				this.createFormModel.content = this.contentEditor.getValue()

				// 提交创建贴子的 AJAX 请求
				post(this.createFormModel).then(response => {
					const { data } = response
					// 获取数据成功后，跳转到帖子详情页面
					setTimeout(() => {
						this.$router.push({
							name: 'post-detail',
							// 注意: 帖子的 postId 是从后端带回来的
							params: { postId: data.id }
						})
					}, 800)
				})	
			})
		},

		resetForm(formName) {
			// 清空表单内容
			this.$refs[formName].resetFields()
			// 清空编辑器内容
			this.contentEditor.setValue('')
			// 清空标签
			this.createFormModel.tags = ''
		}
  	}
}
</script>

<style></style>
